<template>
    <div>
        <!-- 表格 -->
        <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                  border :cell-style="rowStyle"style="width: 100%">
            <el-table-column
                    prop="date"
                    label="登录时间"
                    width="300"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="ip"
                    label="登录IP"
                    width="300"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="url"
                    label="登录地区"
                    width="300"
                    align="center">
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[1,5,10,20]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="tableData.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Dengluruzhi",
        data(){
            return{
                currentPage1: 0,
                tableData: [{
                }],
                currentPage: 1, // 当前页码
                pageSize: 10 // 每页的数据条数
            }
        },
        methods:{
            rowStyle() {//居中
                return "text-align:center";
            },
            //登录成功后根据会话域传来的用户账号
            async cs(){
                var s1 = sessionStorage.getItem("user");
                if(s1!=null){
                    var params = new URLSearchParams();
                    params.append('account',s1);
                    const Call = await this.$http.post("/rizhi/denglurizhi",params) .then((res)=>{
                        this.tableData=res.data
                    })
                }
            },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val;
            }
        },
        created(){
            this.cs();
        }
    }
</script>

<style scoped>
    .el-table td, .el-table th {
        text-align: center;
    }
</style>